<template>
    <div class="message">
        <el-container>
            <el-aside>
                <div>
                    <el-row class="myInfo">
                        <el-avatar :src='myInfo.img'></el-avatar>
                        <span>{{ myInfo.name }}</span>
                    </el-row>
                    <el-row class="userlist">
                        <el-table :data="tableData" stripe style="width: 100%" :show-header='false' @row-click='setUserInfo'>
                            <el-table-column>
                                <template #default="scope">
                                    <template v-if="!scope.row.flag">
                                        <el-avatar :src="scope.row.img"></el-avatar>
                                        <span>姓名：{{ scope.row.name }}</span>
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                </div>
            </el-aside>
            <el-container>
                <el-header>{{ this.$store.state.userInfo.name }}</el-header>
                <el-main>
                    <template v-if="this.$store.state.userInfo.name">
                        <div v-for="(list, index) in msgList" :key="index">
                            <div v-if="(list.receiver==userInfo.name) && userInfo.name=='默认群聊'">
                                <p :class="{'right':msg.type=='my'}" v-for="(msg, index) in list.list" :key="index">
                                    <el-avatar v-if="msg.type=='user'" :src='list.senderimg'></el-avatar>
                                    <el-avatar v-if="msg.type=='my'" :src='list.senderimg' style="float:right;"></el-avatar>
                                    <span class="content">{{ list.msg }}</span>
                                </p>
                            </div>
                            <div v-else>
                                <!-- 根据接收者和发送者定位聊天记录 -->
                                <div v-if="((list.receiver==myInfo.name)&&(list.sender==userInfo.name))||((list.receiver==userInfo.name)&&(list.sender==myInfo.name))">
                                    <!-- 再循环显示聊天记录 -->
                                    <p :class="{'right':list.type=='my'}">
                                        <el-avatar v-if="list.type=='user'" :src='list.senderimg'></el-avatar>
                                        <el-avatar v-if="list.type=='my'" :src='list.senderimg' style="float:right;"></el-avatar>
                                        <span class="content">{{ list.msg }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-main>
                <el-footer>
                    <el-input
                        placeholder="请输入内容"
                        v-model="input"
                        clearable
                        @keyup.enter="send"
                    >
                    </el-input>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {getCurrentTime} from '../../utils/index'
export default {
    data() {
        return {
            input: "",
        };
    },
    computed: {
        tableData() {
            return this.$store.state.userList
        },
        myInfo() {
            return this.$store.state.myInfo
        },
        userInfo() {
            return this.$store.state.userInfo
        },
        chatType() {
            return this.$store.state.chatType
        },
        msgList() {
            return this.$store.state.chatMessageList
        },
        userOut() {
            return this.$store.state.userOut
        }
    },
    methods: {
        send() {
            // 群聊还是私聊
            if (this.chatType == 'group') {
                const data = {
                    type: 'my',
                    sender: this.myInfo.name, // 发送者
                    senderimg: this.myInfo.img,
                    receiver: '默认群聊', // 接收方
                    time: getCurrentTime(),
                    msg: this.input 
                }
                this.$socket.emit('groupChat', data)
                // 自己的信息直接push到数组中
                this.$store.commit('SOCKET_updateChatMessageList', data)
            } else {
                const data = {
                    type: 'my',
                    sender: this.myInfo.name, // 发送者
                    senderimg: this.myInfo.img,
                    receiver: this.userInfo.name, // 接收方
                    time: getCurrentTime(),
                    msg: this.input 
                }
                this.$socket.emit('privateChat', data)
                this.$store.commit('SOCKET_updateChatMessageList', data)
            }
            console.log(this.input)
            this.input = ""
        },
        setUserInfo(row, column, event) {
            if (row.name == '默认群聊') {
                this.$store.commit('changeChatType', 'group')
            } else {
                this.$store.commit('changeChatType', 'private')
            }
            this.$store.commit('setUserInfo', {name: row.name, img: row.img})
        }
    },
};
</script>

<style lang='scss' scope>
.message {
    height: 100%;
    .el-container {
        height: 100%;
        .el-header,
        .el-footer {
            background-color: #b3c0d1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            width: 400px;
            background-color: #d3dce6;
            color: #333;
            text-align: center;
            position: relative;
            div {

                .myInfo {
                    height: 60px;
                    width: 400px;
                    justify-content: center;
                    align-items: center;
                    position: fixed;
                    top: 74px;
                    z-index: 99;
                    background: #d3dce6;
                }
                .userlist {
                    padding-top: 60px;
                    .el-table-column {
                        padding: 0;
                    }
                    .el-table__row:hover{
                        cursor: pointer;
                        padding: 0;
                        margin-top: 5px;
                    }
                }
            }
        }
        .el-header {
            text-align: center;
        }
        .el-main {
            background-color: #e9eef3;
            color: #333;
            height: 100%;
            flex: 1;
            p {
                height: 50px;
                .content {
                    background: antiquewhite;
                    padding: 10px;
                    border-radius: 10px;
                    font-weight: bold;
                }
            }
            .right {
                text-align: right;
            }
        }
    }
}
</style>